import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import reactLogo from '@/assets/react.svg'
import { useAppStore } from '@/store/app'

const Logo: React.FC = () => {
  const { collapsed, layout } = useAppStore()
  const [showTitle, setShowTitle] = useState(false)

  useEffect(() => {
    setShowTitle(isShow())
  }, [collapsed, layout])

  const isShow = () => {
    if (layout === 'top') return true
    if (!collapsed) return true
    return false
  }

  return (
    <div className={styles.logoContainer}>
      <div className={styles.logo}>
        <img src={reactLogo}></img>
      </div>
      {showTitle && <span className={styles.title}>React-Antd-Admin</span>}
    </div>
  )
}
export default Logo
